import React, { Component,useState,useEffect } from 'react'
import { View, Image, Text, ScrollView } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
import icon from "../../assets/icon_live.png"
import bgcImg from "../../assets/bgc.jpg"
import day15Icon from "../../assets/icon_date.png"
// import { EChart } from "echarts-taro3-react";

const allTypes={
    day: {
      color: "rgba(0,0,0,0.2)",
      color2: "rgba(166, 192, 213,0.2)",
      url: bgcImg
    },
    night: {
      color: "rgba(0,0,0,0.2)",
      color2: "rgba(166, 192, 213,0.2)",
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091208%2Fiqhcx2c43cdiqhcx2c43cd.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643453116&t=2a883e5638931f08eb6a930b1fa7c12e"
    }
}
// const barChart = React.createRef();
export default function app() {

  // const [types,useTypes] = useState({ hits: [] });
  const [types,useTypes]=useState(allTypes)
  const [days,useDays]=useState([
    { max: 35, min: 6 },
    { max: 32, min: 5 },
    { max: 33, min: 11 },
    { max: 34, min: 8 },
    { max: 31, min: 9 },
    { max: 30, min: 4 },
    { max: 28, min: 8 },
    { max: 32, min: 8 },
    { max: 25, min: 7 },
    { max: 30, min: 8 },
  ])
  const [maxArr_max,useMaxArrMax]=useState()
  const [maxArr_min,useMaxArrMin]=useState()
  const [minArr_max,useminArrMax]=useState()
  const [minArr_min,useminArrMin]=useState()
  const [dayType,useDayType]=useState('night')
  const [bgc,useBgc]=useState(`background:${types[dayType].color}`)
  // bgc = `background:${types.day.color}`
  useEffect(() => {
    const pageData=()=>{
      let maxArr = [],
      minArr = [],
      maxArr_max,
      maxArr_min,
      minArr_max,
      minArr_min
    days.forEach(item => {
      maxArr.push(item.max)
      minArr.push(item.min)
    })
    maxArr_max = Math.max(...maxArr)
    maxArr_min = Math.min(...maxArr)
    minArr_max = Math.max(...minArr)
    minArr_min = Math.min(...minArr)
    useMaxArrMax(maxArr_max)
    useMaxArrMin(maxArr_min)
    useminArrMax(minArr_max)
    useminArrMin(minArr_min)
    useDayType('night')
    useBgc(`background:${types[dayType].color}`)
    console.log(types);
    }
    pageData()
    // effect
    // return () => {
    //   // useTypes(allTypes)
    //   // cleanup
    // };

    setTimeout(() => {
      useDays([
        { max: 31, min: 1 },
        { max: 32, min: 2 },
        { max: 33, min: 3 },
        { max: 34, min: 4 },
        { max: 35, min: 5 },
        { max: 36, min: 9 },
        { max: 35, min: 2 },
        { max: 34, min: 2 },
        { max: 33, min: 2 },
        { max: 30, min: 2 },
      ])
    }, 10000);
  }, []);
  

  // render() {
 
    let w = 120, h = 80
    let line = (item, nextItem) => {
      let x1 = w / 2,
        y1 = (h / (maxArr_max - maxArr_min)) * (item.max - maxArr_min),
        x2 = w / 2 + w,
        y2 = (h / (maxArr_max - maxArr_min)) * (nextItem.max - maxArr_min)
      var lx = x2 - x1;
      var ly = y2 - y1;
      //计算连线长度
      var length = Math.sqrt(lx * lx + ly * ly);
      //弧度值转换为角度值
      var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI);
      //连线中心坐标
      var midX = (x2 + x1) / 2;
      var midY = (y2 + y1) / 2
      var deg = c <= -90 ? (360 + c) : c;
      let lineStyle = `bottom:${midY}rpx;left:${midX - length / 2}rpx;width:${length}rpx;transform:rotate(${-deg}deg);`
      return (
        <View className="maxLine" style={lineStyle}></View>

      )
    }
    let minLine = (item, nextItem) => {
      let x1 = w / 2,
        y1 = (h / (minArr_max - minArr_min)) * (item.min - minArr_min),
        x2 = w / 2 + w,
        y2 = (h / (minArr_max - minArr_min)) * (nextItem.min - minArr_min)
      var lx = x2 - x1;
      var ly = y2 - y1;
      //计算连线长度
      var length = Math.sqrt(lx * lx + ly * ly);
      //弧度值转换为角度值
      var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI);
      //连线中心坐标
      var midX = (x2 + x1) / 2;
      var midY = (y2 + y1) / 2
      var deg = c <= -90 ? (360 + c) : c;
      let lineStyle = `bottom:${midY}rpx;left:${midX - length / 2}rpx;width:${length}rpx;transform:rotate(${-deg}deg);`
      // console.log(lineStyle);
      return (
        <View className="minLine" style={lineStyle}></View>

      )
    }
    return (
      <View >
        <Image className="bgcImg" src={types.day.url} mode="aspectFill"></Image>
        <View className='home'>
          <View className="theDay">
            <View>2021/11/29</View>
            <View> 农历 十月廿五</View>
          </View>
          <View className="tqi">
            <View className="wd ">

              <Text className="num">24</Text>
              {/* <Text className="unit">°</Text> */}
            </View>
            <View className="tqName">多云</View>
          </View>
          <View className="contents">
            <View className="tqiTimes" style={bgc}>
              <ScrollView scrollX className="scrollBar">
                {
                  days.map(item => {
                    return (
                      <View className="inblock">
                        <View className="blockOne">时间</View>
                        <View className="iconImg flexCenter"><Image className="imgSize" mode="aspectFit" src={icon}></Image></View>
                        <View className="blockOne">温度</View>
                      </View>
                    )
                  })
                }



              </ScrollView>

            </View>

            <View className="future" style={bgc}>
              <View className="futureContent" >
                <View className="day15 flexItem">
                  <Image src={day15Icon} className="titleSize" mode="aspectFit"></Image>
                  <Text className="ml">未来15天</Text>

                </View>
                <View className="day15Tq">
                  <ScrollView scrollX className="scrollBar">
                    <View className="day15Bar">
                      {
                        days.map((item, index) => {
                          return (
                            <View className="inblock day1Tq">
                              <View className="blockOne">昨天</View>
                              <View className="blockOne">12-01</View>
                              <View className="iconImg flexCenter"><Image className="imgSize" mode="aspectFit" src={icon}></Image></View>
                              <View className="blockOne">{item.max}°</View>
                              <View className="lineMax">
                                {
                                  index < days.length - 1 ? line(item, days[index + 1]) : ''
                                }
                              </View>
                              <View className="lineMin">
                                {
                                  index < days.length - 1 ? minLine(item, days[index + 1]) : ''
                                }

                              </View>
                              <View className="blockOne ">{item.min}°</View>
                              <View className="iconImg flexCenter"><Image className="imgSize" mode="aspectFit" src={icon}></Image></View>
                              <View className="blockOne">北风</View>
                              <View className="blockOne">3-4级</View>

                            </View>
                          )
                        })
                      }
                    </View>



                  </ScrollView>

                </View>


              </View>

            </View>
            <View className="future" style={bgc}>
              <View className="futureContent" >
                <View className="day15 flexItem">
                  <Image src={icon} className="titleSize" mode="aspectFit"></Image>
                  <Text className="ml">生活指数</Text>

                </View>
                <View className="futureList">
                  <View className="flexItem row ">
                    <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                    <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                  </View>
                  <View className="flexItem row ">
                  <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                    <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                  </View>
                  <View className="flexItem row">
                  <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                    <View className="w50 flex1 flexItem">
                      <View className="futureIcon">
                        <Image src={icon} className="futureIconSize" mode="aspectFit"></Image>
                      </View>
                      <View className="futureText">
                        <View>带伞</View>
                        <View>无需/需要</View>
                      </View>

                    </View>
                  </View>
                </View>


              </View>

            </View>
          </View>

        </View>
      </View>
    )
  // }
}
